Phyein Usul← All simulations

Fig. 1 · wave optics · Huygens' principle

Wave Interference.

Circular waves from point sources on one line add up crest by crest. With enough sources, the ripples merge into a straight wavefront.

Fig. 1 · superposition of circular waves · click the field to add a source 2 sources

Lecture note · Fig. 1 · wave optics

Circular waves that add up to a straight one

Numa Koudsie · for school students and first- and second-year undergraduates

Abstract. Drop a row of pebbles into a pond and, a little way off, their rings merge into one straight ripple. This note explains that everyday sight with a single idea: waves add. It starts from the ring sent out by one source, adds two rings to find the calm lines between them, adds a whole row to find a beam and its unwanted side beams, and then shows when the ripples of a row really merge into the straight front that Huygens drew in 1690. It ends with how the page computes and colours the field on every frame. Sections marked ★ carry the heavier mathematics and can be skipped on a first reading without losing the thread.

01Pebbles in a row

Throw one pebble into a still pond and a ring runs outward. Throw a handful in a line, all at the same moment, and a little way off the rings have merged into one straight ripple marching away from the line.

The same thing happens wherever many sources act in step. Sea waves arriving at a harbour mouth make the water in the gap rise and fall together; inside the harbour that strip of water behaves like a row of sources and sends the waves on in curved fronts. At a concert, the tall columns of loudspeakers hanging beside the stage are line arrays: many boxes driven with the same signal throw the sound forward in a flat sheet towards the audience, instead of spraying it in every direction. Radars and some mobile-phone base stations go one step further. By driving their elements with tiny delays instead of all together, they swing their beam without moving anything.

Christiaan Huygens turned this into a principle in his Treatise on Light of 1690. Every point of a wavefront, he proposed, acts as a new source of small circular wavelets; a moment later the new wavefront is the line that touches all the wavelets, their envelope (Figure 1). The simulation above builds this picture literally: up to 24 point sources on one line, all oscillating together, each sending out circular waves, and a computer that adds them up point by point.

Huygens’ picture leaves two things open. It does not say why the wavelets themselves are invisible, leaving only the envelope, and it does not say how close together the sources must be for the envelope to be straight. Adding the waves crest by crest settles both, and that is what this note does.

λ v new wavefront: the envelope of the wavelets wavelets of one source sources in a row, all in step the front bends round the ends
Figure 1Huygens’ construction for a row of nine sources in step. Each source has sent out circular wavelets; two crests of each are drawn, one wavelength \(\lambda\) apart (pale, with the wavelets of one source darker). The straight line that touches them all is the new wavefront, moving away from the row at the wave speed \(v\). Beyond the ends of the row the envelope bends round (dashed): a row of finite length cannot make a perfectly straight front.

02The model

A word on what the figure is, before the physics. Each source sends out rings whose phase runs outward with the chosen wavelength; the rings are added, and that sum, with its sign, is what the colours show. The addition is the real physics of interference, the path-difference picture below. Two things are simplified. The height of a ring is made to fall off exponentially with distance, a knob of the page, instead of the \(1/\sqrt r\) of a true circular wave; and frequency and wavelength are set separately, so no dispersion relation ties them together.

Let \(\psi(x, y, t)\) be the signed field shown by the colours. For the physics, consider first a wave of one fixed speed, which obeys the two-dimensional wave equation

\[ \frac{\partial^2\psi}{\partial t^2} = v^2\left(\frac{\partial^2\psi}{\partial x^2} + \frac{\partial^2\psi}{\partial y^2}\right), \tag{1} \]

with \(v\) the speed of the waves. Every term contains \(\psi\) once, and only once: the equation is linear. So if \(\psi_1\) and \(\psi_2\) are solutions, their sum \(\psi_1 + \psi_2\) is a solution too. This superposition principle is the whole engine of the simulation: two waves pass through each other and simply add.

The page measures lengths in pixels of a field that is always \(800\ \mathrm{px}\) wide, whatever the size of the screen, and time in seconds; it fixes no scale in metres. As in Figure 2 (left), \(x\) runs to the right and \(y\) downwards from the top-left corner. The height of the field is \(800\ \mathrm{px}\) times the height of the canvas over its width: \(360.5\ \mathrm{px}\) on a wide screen, where the canvas measures 770 × 347 css pixels, and \(800\ \mathrm{px}\) on a phone, where it is square. All sources sit on one line \(y = y_s\), \(10\ \mathrm{px}\) above the bottom edge. Source \(i\) is at \(x_i\), and a point \(P\) of the field is at the distance

\[ r_i = \sqrt{(x - x_i)^2 + (y - y_s)^2} \tag{2} \]

from it. The model makes four more assumptions.

  • All sources oscillate at the same frequency \(f\), with the same strength and in step, as if one motor drove them all.
  • The medium is non-dispersive: every wave travels at the same speed \(v = f\lambda\), with \(\lambda\) the wavelength.
  • The tank is open: waves leave the picture without reflecting from its edges.
  • The sources are points that do not disturb one another: a ring passes through a neighbouring source unchanged.

Three sliders set the waves: Wavelength \(\lambda\) from 16 to \(64\ \mathrm{px}\) (default \(30\ \mathrm{px}\)), Frequency \(f\) from 0.2 to \(2\ \mathrm{Hz}\) (default \(1.1\ \mathrm{Hz}\)) and Damping \(\gamma\) from 0 to 0.6 (default 0.15). The buttons place the sources: Reset puts two at \(x = 200\) and \(600\ \mathrm{px}\), Line of 16 spreads sixteen evenly from 64 to \(736\ \mathrm{px}\), and a click on the field adds one on the source line, at the horizontal position of the click.

x y 0 ys P (x, y) r1 rN x1 xN 800 px the field, in page coordinates θ s sin θ s two neighbouring sources, seen from far away towards a distant point normal
Figure 2Left: the field in the page’s own coordinates. The sources sit on the dashed line \(y = y_s\), and a point \(P\) of the field is at the distances \(r_1, \dots, r_N\) from them. Right: two neighbouring sources a distance \(s\) apart, seen from a point so far away that the paths to it are parallel, at the angle \(\theta\) from the normal to the row. The left path is longer by \(s\sin\theta\) (burgundy), the piece cut off by the dashed line drawn at right angles to both paths.

03One source, one ring★

Start with a single source at the origin of polar coordinates, oscillating at the angular frequency \(\omega = 2\pi f\). It is convenient to write the field as the real part of a complex one, \(\psi = \operatorname{Re}\,[\,u(r)\,e^{-i\omega t}\,]\); every equation below is linear, so taking the real part at the end is allowed. The ring has no preferred direction, so \(u\) depends on the distance \(r\) alone. For such a function the two-dimensional Laplacian in (1) becomes \(u'' + u'/r\), and the wave equation turns into

\[ u'' + \frac{u'}{r} + k^2 u = 0, \quad k = \frac{\omega}{v} = \frac{2\pi}{\lambda} . \tag{3} \]

This is Bessel’s equation of order zero, and \(k\) is the wave number, the phase gained per unit of distance. The term \(u'/r\) is the one a straight wave does not have: it records that the ring spreads over a longer and longer circle. Of the solutions of (3), the one that carries waves outward is the Hankel function \(H_0^{(1)}(kr) = J_0(kr) + i\,Y_0(kr)\). Far from the source, for \(kr \gg 1\), it behaves as

\[ \begin{gathered} H_0^{(1)}(kr) \approx \sqrt{\tfrac{2}{\pi k r}}\,e^{i(kr - \pi/4)}, \\ \psi(r, t) \approx \sqrt{\tfrac{2}{\pi k r}}\,\cos(kr - \omega t - \pi/4) . \end{gathered} \tag{4} \]

Two facts are in (4). The phase \(kr - \omega t\) says that the crests run outward: a crest keeps \(kr - \omega t\) fixed, so it moves at \(\mathrm{d}r/\mathrm{d}t = \omega/k = f\lambda\). And the height falls as \(1/\sqrt r\), for a simple reason. A steady source puts in energy at a steady rate, and with no losses the same power must cross every circle drawn round it. The length of the circle grows as \(2\pi r\), so the energy per unit length of crest, which goes as \(\psi^2\), falls as \(1/r\), and the height as \(1/\sqrt r\). The asymptotic form needs \(kr \gg 1\). At \(\lambda = 30\ \mathrm{px}\), \(kr = 1\) at \(r = \lambda/2\pi = 4.77\ \mathrm{px}\); the first correction is a phase lead of \(1/(8kr)\) radians, \(0.01\) rad two wavelengths from a source and smaller beyond, with a still smaller error in the height, so the form holds everywhere on screen except within a few pixels of each source.

3.1The page’s version of one ring

The page keeps the travelling phase and makes two deliberate changes. It drops the constant \(-\pi/4\), which is the same for every source and only shifts the origin of time. And it replaces the slow \(1/\sqrt r\) by an exponential damping, which stays finite at the source and imitates the loss of energy in real water:

\[ \begin{aligned} \psi_i(r_i, t) &= a_i\cos(k r_i - \omega t), \\ a_i &= e^{-\gamma r_i/R}, \quad R = 300\ \mathrm{px}. \end{aligned} \tag{5} \]

The Damping slider sets \(\gamma\), the number of factors of \(e\) by which the amplitude falls over \(300\ \mathrm{px}\); at the default \(\gamma = 0.15\) a ring keeps \(e^{-0.15} = 0.861\) of its height after \(300\ \mathrm{px}\). This is a stand-in, not physics derived from the water: at \(\gamma = 0\) a ring on the page does not weaken at all with distance, whereas a real ripple still falls off as \(1/\sqrt r\). Section 7.1 shows one visible consequence.

04Adding the rings

By superposition, the field of \(N\) sources is the sum of their rings. The page divides the sum by \(N\), so that the colour scale means the same whatever the number of sources:

\[ \psi(x, y, t) = \frac{1}{N}\sum_{i=1}^{N} a_i\cos(k r_i - \omega t). \tag{6} \]

Here \(k = 2\pi/\lambda\), \(\omega = 2\pi f\), and \(a_i = e^{-\gamma r_i/R}\) says how much ring \(i\) has faded by the time it reaches distance \(r_i\), equation (5). Since every \(a_i \le 1\), \(|\psi|\) can never exceed 1. All terms share one \(\omega\), so every point of the field moves up and down at the frequency of the sources; from point to point only the size of the motion and its timing change. To see this, write each term as the real part of a turning arrow, a phasor: \(a_i\cos(kr_i - \omega t) = \operatorname{Re}\,[\,a_i e^{ikr_i} e^{-i\omega t}\,]\). Then

\[ \begin{aligned} \psi &= \operatorname{Re}\!\left[\,U e^{-i\omega t}\right], \\ U &= \frac{1}{N}\sum_{i=1}^{N} a_i\,e^{ikr_i} = C + iS, \\ A &= |U| = \sqrt{C^2 + S^2} . \end{aligned} \tag{7} \]

Each source contributes an arrow of length \(a_i/N\), turned by the angle \(kr_i\): one full turn for every wavelength of path. The point oscillates with amplitude \(A\), the length of the sum of all the arrows. Where the arrows point the same way, the water heaves (constructive interference); where they point every which way, they cancel and the water is calm (destructive interference). The amplitude \(A\) describes how far each point can oscillate. The colours show its signed displacement at this instant, rather than the amplitude map itself. The page stores \(C\), \(S\) and \(A\) at every grid point, and the data panel shows them.

Each ring runs outward as if it were alone: a crest of ring \(i\) keeps \(kr_i - \omega t\) fixed and travels at

\[ v = \frac{\omega}{k} = f\lambda . \tag{8} \]

This is the Speed \(v = f\lambda\) readout: \(1.1\ \mathrm{Hz} \times 30\ \mathrm{px} = 33\ \mathrm{px/s}\) at the defaults, with one crest leaving each source every \(T = 1/f = 0.909\ \mathrm{s}\). It is the speed of each ring, not always of the crests you see. Where two rings cross at an angle, the crests of their sum sit where both rings are high together, and that meeting point slides along faster than either ring, like the crossing point of a pair of scissors closing. Straight up the middle between the two Reset sources, at the centre of a wide screen, the crests climb at \(1.55\,v = 51\ \mathrm{px/s}\) and lie \(46\ \mathrm{px}\) apart instead of \(30\).

05Two sources: calm hyperbolae

Press Reset: two sources, \(s = 400\ \mathrm{px}\) apart. Write \(\bar r = (r_1 + r_2)/2\) for the mean distance of a point from them and \(\Delta r = r_2 - r_1\) for the path difference. If the two rings arrive equally strong, \(a_1 = a_2 = a\), the identity \(\cos A + \cos B = 2\cos\tfrac{A-B}{2}\cos\tfrac{A+B}{2}\) turns (6) into

\[ \psi = a\,\cos\!\left(\frac{k\,\Delta r}{2}\right)\cos\!\left(k\bar r - \omega t\right). \tag{9} \]

The second factor is a wave running outward. The first does not depend on time: it is an envelope that fixes how far each point moves. The water never moves where it vanishes, that is where

\[ \Delta r = \left(m + \tfrac12\right)\lambda \tag{10} \]

for any whole number \(m = 0, \pm1, \pm2, \dots\), and it moves most where \(\Delta r = m\lambda\): there the crests from both sources arrive together. A curve on which the difference of the distances to two fixed points is constant is a hyperbola with those points as foci. So the calm lines are hyperbolae fanning out from the stretch between the sources, with the loud bands in between. The path difference can never exceed the spacing, \(|\Delta r| \le s\), so the calm lines are those with \(|m + \tfrac12|\,\lambda < s\). At \(\lambda = 30\ \mathrm{px}\) that is \(m = -13\) to \(12\): 26 calm lines, close to \(2s/\lambda = 26.7\). At \(\lambda = 60\ \mathrm{px}\) there are 14.

With damping, the two rings reach most points with different heights, \(a_1 \neq a_2\), and (9) no longer holds exactly. On a calm line the two arrows of (7) still point in opposite directions but are no longer equally long, so the water keeps a small motion of amplitude \(|a_1 - a_2|/2\). Along the centre row of the field on a wide screen this residue reaches 0.071 at the default \(\gamma = 0.15\) and 0.162 at \(\gamma = 0.6\), largest out to the sides, where one source is much nearer than the other. At \(\gamma = 0\) the calm lines are perfectly still.

Exercise 5.1 · on the figure above

Press Reset, then Pause. Count the cream calm lines that start from the bottom edge between the two sources: equation (10) predicts 26 at \(\lambda = 30\ \mathrm{px}\). Set Wavelength \(\lambda\) to \(60\ \mathrm{px}\) and count again; (10) predicts 14. Then return to \(30\ \mathrm{px}\), press Play, set Damping \(\gamma\) to 0.6 and watch the outer calm lines: they no longer stay cream, but flicker faintly.

06A row: one beam and its side beams★

Now press Line of 16: sixteen sources at \(x_n = 64 + 44.8\,n\ \mathrm{px}\), \(n = 0, \dots, 15\), so that the spacing is \(s = 44.8\ \mathrm{px}\) and the row is \(D = 15s = 672\ \mathrm{px}\) long. Seen from very far away, in the direction at the angle \(\theta\) from the normal to the row (Figure 2, right), the paths to all sources are parallel, and each source is nearer than its left-hand neighbour by \(s\sin\theta\):

\[ r_n \approx r_0 - n\,s\sin\theta . \tag{11} \]

Set the damping aside for the moment, \(\gamma = 0\): all the arrows in (7) are then equally long, and only their angles differ, by \(\beta = ks\sin\theta\) from one source to the next. (With damping, the arrows of the nearer sources are a little longer. That moves no beam, and at the default \(\gamma\) it changes the result (12) by at most 0.04 at the default \(\lambda\), and by up to 0.06 over the range of the slider.) The sum of the arrows is a geometric series; with \(|1 - e^{-i\phi}| = 2|\sin(\phi/2)|\),

\[ \begin{aligned} \frac{1}{N}\sum_{n=0}^{N-1} e^{-in\beta} &= \frac{1}{N}\,\frac{1 - e^{-iN\beta}}{1 - e^{-i\beta}}, \\ |F(\theta)| &= \left|\frac{\sin(N\beta/2)}{N\sin(\beta/2)}\right| . \end{aligned} \tag{12} \]

Checked against the page’s own sum (6) with \(\gamma = 0\) at a distance of 10⁶ px: largest difference 2.2 × 10⁻³, and 6.3 × 10⁻⁵ at 10⁷ px. The difference is the curvature of the wavefront across the row, which (11) neglects.

\(|F|\) is the amplitude far away in the direction \(\theta\), as a fraction of what it would be if all \(N\) arrows lined up. They do line up whenever \(\beta\) is a whole number of turns, \(\beta = 2\pi m\): every term then equals 1, the apparent \(0/0\) in (12) is removable, and \(|F| = 1\) exactly. The case \(m = 0\) is the main beam, straight out from the row; its edges are the first zeros, where \(N\beta/2 = \pm\pi\). The cases \(m = \pm1, \pm2, \dots\) are further beams of full strength, called grating lobes:

\[ \sin\theta_{\text{edge}} = \pm\frac{\lambda}{Ns}, \qquad \sin\theta_m = m\,\frac{\lambda}{s} . \tag{13} \]

Between two neighbouring full beams lie \(N - 2\) weak side lobes; for \(N = 16\) the strongest reaches 0.220. Figure 3 plots (12) for Line of 16. At \(\lambda = 30\ \mathrm{px}\), \(\sin\theta_1 = 30/44.8 = 0.670\) and the side beams leave at \(\theta_1 = \pm 42.0^\circ\). At \(\lambda = 40\ \mathrm{px}\) they lean over to \(63.2^\circ\), at \(44\ \mathrm{px}\) to \(79.2^\circ\), almost along the row, and from \(45\ \mathrm{px}\) on, \(\lambda/s > 1\) and they have no direction left to go.

0 0.20 0.40 0.60 0.80 1.00 −90 −60 −30 0 30 60 90 direction from the normal to the row (degrees) far-field amplitude |F| side beam, 42° side beam, −42° main beam wavelength 64 px wavelength 30 px (default)
Figure 3Far-field amplitude \(|F|\) of Line of 16 (\(N = 16\), \(s = 44.8\ \mathrm{px}\)), computed from equation (12) every \(0.1^\circ\) from \(-90^\circ\) to \(90^\circ\). At the default \(\lambda = 30\ \mathrm{px}\) (burgundy) the main beam, \(2.40^\circ\) from its centre to its first zero, is joined by two side beams of full strength at \(\pm 42.04^\circ\). At \(\lambda = 64\ \mathrm{px}\), longer than the spacing, the side beams are gone and the main beam is wider, \(5.12^\circ\) to its first zero.
A row of sources in step

\(N\) equal sources a distance \(s\) apart, all in step, send their strongest wave straight out from the row, in a beam of half-width \(\sin\theta = \lambda/(Ns)\): the longer the row, the narrower the beam. Whenever the spacing is at least one wavelength, \(s \ge \lambda\), they also send equally strong side beams, at \(\sin\theta_m = m\lambda/s\). A row meant to make one clean beam needs its sources closer together than one wavelength.

Concert line arrays and phased-array antennas obey (13) too, and add one trick that the page does not offer. If source \(n\) is driven a time \(n\tau\) later than source 0, its arrow is turned by an extra \(n\omega\tau\). The arrows then line up where \(ks\sin\theta = \omega\tau\), and the main beam swings to

\[ \sin\theta_0 = \frac{v\tau}{s}, \tag{14} \]

tilted towards the sources that fire last, with nothing moving. In the simulation all sources are in step, \(\tau = 0\), and the main beam always points straight up.

Exercise 6.1 · on the figure above

Press Line of 16. At \(\lambda = 30\ \mathrm{px}\) the field above the row is a chequerboard: straight crests crossed by two families of tilted crests, heading out at about \(42^\circ\) to either side. Raise Wavelength \(\lambda\) one step at a time and follow the tilted crests as they lean over towards the row, as (13) predicts. From \(45\ \mathrm{px}\) on, the region in front of the row fills with straight crests; at \(64\ \mathrm{px}\) they run unbroken across the field.

07Near the row: the front straightens

Section 6 found that, far away, a row sends one beam straight out and, when \(s \ge \lambda\), side beams in the directions \(\sin\theta_m = m\lambda/s\). Equation (12) holds only very far away. Seen from a distance \(r\) on the normal through its middle, the ends of a row of length \(D\) are further away than its middle by about \(D^2/(8r)\), a path that (11) neglects; it must be a small part of a wavelength. The usual form of this Fraunhofer condition is

\[ r \gg \frac{D^2}{\lambda} . \tag{15} \]

For Line of 16 at \(\lambda = 30\ \mathrm{px}\), \(D^2/\lambda = 15\,053\ \mathrm{px}\), 18.8 times the width of the field. Everything on screen is near field: the beams of Figure 3 have not yet separated, and \(42^\circ\) is the direction in which the side beams are heading, not a line one can read off the picture. The page always uses the exact distances (2), so it shows this near field correctly.

Figure 4 follows the amplitude \(A\) of (7) along a line parallel to the row: the centre row of the field on a wide screen, \(169.1\ \mathrm{px}\) above the sources. It spreads \(N = 2\), 4 and 16 sources over the same \(672\ \mathrm{px}\), as Line of 16 does, at \(\lambda = 64\ \mathrm{px}\), and compares them with a continuous row. With two sources the line crosses calm and loud bands in turn, and between \(x = 200\) and \(600\ \mathrm{px}\) the amplitude swings from 0.009 to 0.829. Four sources still leave deep fringes, from 0.036 to 0.765. Sixteen sources, now \(44.8\ \mathrm{px}\) apart and so closer than one wavelength, keep the amplitude between 0.119 and 0.168, never more than 0.050 from the continuous row: the ripples have merged into one front, as in Figure 1. The slow ripple that remains, in the continuous row as well, comes from its ends, where the front bends round.

0 0.20 0.40 0.60 0.80 0 100 200 300 400 500 600 700 800 position along the row, x (px) amplitude A on the centre row N = 2 N = 4 N = 16 continuous row
Figure 4Amplitude \(A = |U|\) of equation (7) along the centre row of the field on a wide screen (\(y = 181.4\ \mathrm{px}\), \(169.1\ \mathrm{px}\) above the sources), every \(1\ \mathrm{px}\) from \(x = 0\) to \(800\ \mathrm{px}\), at \(\lambda = 64\ \mathrm{px}\) and \(\gamma = 0.15\). The \(N\) sources sit where Line of 16 puts them, \(x = 64 + 672\,n/(N-1)\ \mathrm{px}\); the continuous row is 67 201 sources between the dashed lines at 64 and \(736\ \mathrm{px}\). Two and four sources leave deep calm and loud bands; sixteen give an almost even amplitude that follows the continuous row.

At the default \(\lambda = 30\ \mathrm{px}\) the same sixteen sources do not merge. Along the same line the amplitude runs from 0.013 to 0.387, with tall peaks about every \(44\ \mathrm{px}\), the spacing of the sources. Near the row the straight-ahead wave and the two side waves of (13) overlap. Where their crests meet the water is loud, where a crest meets a trough it is calm, and the pattern repeats along the row every \(\lambda/\sin\theta_1 = s\). This is the near-field face of the grating lobes: a row with \(s > \lambda\) never makes a clean front.

7.1Which sources build the front★

Take a point \(P\) at the height \(h\) above a long, dense row, and a source at the horizontal distance \(u\) from the foot of the perpendicular from \(P\). For \(|u| \ll h\) its distance to \(P\) is

\[ r = \sqrt{h^2 + u^2} \approx h + \frac{u^2}{2h} . \tag{16} \]

The sources right below \(P\) all arrive with nearly the same phase \(kh\), and their arrows line up. Further out the phase grows as \(u^2\), the arrows wind round faster and faster, and they cancel in pairs. The arrows that count are those within about \(|u| < \sqrt{\lambda h}\) of the foot, the first Fresnel zone. Replacing the sum over sources by an integral, \(\tfrac1N\sum_i \to \tfrac1D\int\mathrm{d}u\), and using \(\int_{-\infty}^{\infty} e^{iau^2}\,\mathrm{d}u = \sqrt{\pi/a}\;e^{i\pi/4}\) with \(a = k/2h\),

\[ \begin{aligned} U &\approx \frac{e^{-\gamma h/R}}{D}\,e^{ikh}\int_{-\infty}^{\infty} e^{iku^2/2h}\,\mathrm{d}u \\ &= \frac{\sqrt{\lambda h}}{D}\;e^{-\gamma h/R}\;e^{\,i(kh + \pi/4)} . \end{aligned} \tag{17} \]

Three things follow. The phase \(kh\) is the same all along a line parallel to the row: the front is straight. The amplitude does not depend on where \(P\) is along the row, as long as both ends are more than a Fresnel zone away. And the amplitude is small. At \(\lambda = 64\ \mathrm{px}\) and \(h = 169.1\ \mathrm{px}\) the Fresnel zone is \(\sqrt{\lambda h} = 104.0\ \mathrm{px}\), and (17) gives \(A = 0.142\), against an average of 0.141 for the continuous row in Figure 4 and 0.140 for sixteen sources, both taken between \(x = 200\) and \(600\ \mathrm{px}\). Most of the arrows cancel; the front at each point is built by the few sources within about a Fresnel zone of it, which is why Line of 16 looks so much paler than two sources.

The factor \(\sqrt h\) in (17) is an artefact of the page’s damping, and a useful warning. Sixteen sources at \(\lambda = 64\ \mathrm{px}\) give an average amplitude of 0.076, 0.110, 0.140, 0.157 and 0.173 on lines 50, 100, 169, 250 and \(340\ \mathrm{px}\) above the row: the merged front brightens as it travels. A real circular wave carries the factor \(1/\sqrt{kr}\) of (4); in (17) it cancels the \(\sqrt h\), and the front keeps a constant height, as a straight wave with nothing to spread into should.

08Two maps and a turning phase

Equation (6) asks for one cosine per source, per point, per frame. The page avoids almost all of them. Expanding \(\cos(kr_i - \omega t) = \cos kr_i\cos\omega t + \sin kr_i\sin\omega t\) separates space from time:

\[ \begin{aligned} \psi &= C\cos\omega t + S\sin\omega t, \\ C &= \frac1N\sum_i a_i\cos kr_i, \\ S &= \frac1N\sum_i a_i\sin kr_i . \end{aligned} \tag{18} \]

These are the real and imaginary parts of \(U\) in (7). The maps \(C(x, y)\) and \(S(x, y)\) depend on the positions of the sources, on \(\lambda\) and on \(\gamma\), but not on time. The split is exact, not an approximation, because all sources share one \(\omega\).

  • When sources are added, cleared or reset, or the Wavelength or Damping slider moves, the page recomputes \(C\) and \(S\) at every grid point: \(2NP\) cosines and sines for \(P\) points. The Frequency slider does not trigger this, because \(f\) enters only through \(\omega t\): it changes how fast the pattern runs, never its shape.
  • On every frame the shared phase advances by the real time \(\Delta t\) since the last frame, capped at \(0.05\ \mathrm{s}\), so that the waves run at the chosen frequency on any screen: \(\omega t \leftarrow \omega t + 2\pi f\,\Delta t\). Each point then costs two multiplications and an addition, whatever \(N\) is.
  • A canvas \(w\) css pixels wide gets \(\min(360, \max(60, \operatorname{round}(w/1.1)))\) columns, and rows in proportion to its height; each value is computed at the centre of its cell. Measured in headless Chromium: 360 × 162 = 58 320 points in windows 1280–1600 px wide, 360 × 360 = 129 600 at 880 px, and 324 × 324 = 104 976 on a phone 390 px wide. At the shortest wavelength, \(16\ \mathrm{px}\), that is 7.2 points per wavelength on the wide screen and 6.48 on the phone, still more than the two needed to show a wave at all.
  • For Line of 16 on the wide screen one rebuild is \(2 \times 16 \times 58\,320 = 1\,866\,240\) cosines and sines; it took 59–98 ms in three headless Chromium runs, while a frame took 0.9–1.6 ms. These times depend on the machine.
  • \(C\), \(S\) and \(\psi\) are stored as 32-bit floating-point numbers, about seven significant figures, far finer than the colour steps of the next section.

09From numbers to colours

Because the field is always \(800\ \mathrm{px}\) wide, \(\lambda = 30\ \mathrm{px}\) is one 26.7th of the width on every screen, and the pattern is the same on a phone and on a monitor, only drawn smaller or larger. Each grid point becomes one pixel of a small image, and the browser stretches that image over the canvas with smoothing. That is why the bands look continuous rather than blocky; a screen pixel between two grid points shows a blend of both.

The value \(\psi \in [-1, 1]\) selects row \(n = \operatorname{round}(127.5\,\psi + 127.5)\) of a table of 256 colours, built channel by channel as

\[ c = c_0 + (c_\pm - c_0)\,|\psi|^{0.8} \tag{19} \]

with \(c_0\) cream \((255, 250, 243)\) for still water, \(c_+\) burgundy \((122, 31, 43)\) for a crest, \(\psi = +1\), and \(c_-\) ink \((58, 50, 46)\) for a trough, \(\psi = -1\). The power 0.8 lifts small values a little, so that the weak far field stays visible: \(\psi = 0.1\) is drawn \(0.1^{0.8} = 0.158\) of the way from cream. One step of the table is \(\Delta\psi = 2/255 = 0.0078\). Before the lookup, \(\psi\) is clipped to \([-1, 1]\), a guard against rounding only, since (6) already keeps \(|\psi| \le 1\).

The colours show the signed height at this instant, not an average over time. A calm line stays cream in every frame, while a loud band flickers between ink and burgundy once per period. The amplitude \(A\) of (7), which does not change in time, is not drawn; the data panel stores it as the map A.

Each source is drawn as a burgundy dot of radius 5.5 css pixels with a cream rim and a soft glow, on the line \(y_s\). A click on the field adds a source at the clicked \(x\), always at the height \(y_s\), and the list keeps the newest 24. Add 5 random adds five sources at random between \(133.3\) and \(666.7\ \mathrm{px}\); Clear removes them all. The readouts give the number of sources and the speed (8).

10What the model leaves out

  • Exponential damping replaces the true \(1/\sqrt r\) spreading. Near a source a real ring is taller than shown, and in front of a long row a real straight front keeps its height instead of brightening as \(\sqrt h\) (section 7.1).
  • Real water waves are dispersive: the frequency fixes the wavelength, and longer waves run faster (Fig. 5 of this site). Here \(f\) and \(\lambda\) are set separately, and every wave moves at \(v = f\lambda\).
  • There are no walls: waves simply leave the picture, and nothing comes back.
  • The row radiates downwards as strongly as upwards; that half lies below the bottom edge and is not drawn. Huygens’ wavelets share this flaw, a backward wave that is never observed. Fresnel and Kirchhoff removed it with an obliquity factor; in Kirchhoff’s form it weights each wavelet by \((1 + \cos\chi)/2\), where \(\chi\) is the angle from the forward direction.
  • All sources are in step: the delays of (14) that steer a phased array cannot be set.
  • Dividing by \(N\) keeps the colours comparable, but it also makes each source fainter as more are added.
  • The sources are points that neither feel nor scatter each other’s waves.

10.1Further reading

  1. E. Hecht, Optics, 5th edition, Pearson, 2017: chapters 4 (Huygens’ principle), 7 (the superposition of waves), 9 (interference) and 10 (diffraction).
  2. F. S. Crawford, Waves, Berkeley Physics Course, volume 3, McGraw-Hill, 1968: chapter 9 (interference and diffraction; section 9.6, Huygens’ principle). The link is a lending copy at the Internet Archive.
  3. C. A. Balanis, Antenna Theory: Analysis and Design, 4th edition, Wiley, 2016: chapter 6 (linear arrays, array factor, grating lobes and beam steering).
  4. M. Born and E. Wolf, Principles of Optics, 7th edition, Cambridge University Press, 1999: chapter 8 (the Huygens–Fresnel principle and Kirchhoff’s theory of diffraction).
  5. R. P. Feynman, R. B. Leighton and M. Sands, The Feynman Lectures on Physics, Addison-Wesley, 1963–1965, chapters linked to Caltech’s online edition: volume I, chapters 29 (interference: two sources and the adding of arrows, as in sections 4 and 5) and 30 (diffraction: the row of \(n\) equal sources, its beams and side beams, as in section 6). Free to read, and the gentlest of these five.